<template>
  <div>
    <GSearch :isMoreSearch="false" :query-params="queryParams" @query-params="getTableData(true)">
      <el-row :gutter="12">
        <el-col :span="8">
          <el-input v-model="queryParams.name" placeholder="请输入菜单名称" @keyup.native.enter="getTableData(true)" />
        </el-col>
      </el-row>
    </GSearch>

    <div class="mt-2 mb-2">
      <el-button type="primary" icon="el-icon-plus" @click="handleCreate">新增</el-button>

      <el-button type="warning" icon="el-icon-upload2" @click="handleExport">导出</el-button>
    </div>

    <main class="mt-8">

      <TreeTable :fields="tableHeader" :data="tableData" :loading="loading">
        <template #status="{ row }">
          <el-switch
            v-model="row['status']"
            :active-value="1"
            :inactive-value="0"
            @change="(val) => handleChangeDisplay(row.id, val)"
          >
          </el-switch>
        </template>
  
        <template #action="{ row }">
          <el-button type="text" @click="handleCreateChild(row.id)">添加</el-button>
          <el-button type="text" @click="handleUpdate(row.id)">修改</el-button>
          <el-button type="text" @click="handleDel(row.id)">删除</el-button>
        </template>
      </TreeTable>
    </main>


    <!-- add&edit -->
    <CreateMenu
      v-if="displayData.create"
      :edit-id="editId"
      :is-child="isChild"
      :visible.sync="displayData.create"
      :menu-opts="menuOpts"
      @close-create="handleCloseCreate"
    ></CreateMenu>
  </div>
</template>

<script>
import { getMenuTreeApi, delMenuApi, changeDisplayApi } from '@/api/menu-api';
import { logoutApi } from '@/api/manager-api';
import { tableHeader } from './menu';
import CreateMenu from './components/CreateMenu.vue';
export default {
  name: 'Menu',
  components: {
    CreateMenu
  },
  data() {
    return {
      loading: false,
      tableHeader,
      tableData: [],
      queryParams: {
        name: ''
      },
      displayData: {
        create: false,
        detail: false
      },
      isChild: false, // 是否为添加子菜单
      editId: 0,
      menuOpts: []
    };
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    // ** ---------- table ---------- **

    async getTableData() {
      try {
        const params = {};
        const { data } = await getMenuTreeApi(params);
        this.tableData = data ?? [];
        // this.menuOpts = data ?? [];
      } catch (err) {
        console.warn(err);
      }
    },
    // 勾选数据
    handleSelectionChange(value) {
      this.selectedList = value ?? [];
    },
    // 翻页
    handlePagination(value) {
      Object.assign(this.page, value);
      this.getTableData();
    },
    // ** ---------- table End---------- **

    // ** ---------- crud ---------- **

    // 重置数据 - 单独提出，避免语义混淆
    handleResetData() {
      this.isChild = false;
      this.selectedList = [];
      this.getTableData();
    },

    handleCreate() {
      // 重置编辑id
      this.editId = 0;
      this.displayData.create = true;
    },

    handleCreateChild(id) {
      this.editId = id;
      this.isChild = true;
      this.displayData.create = true;
    },

    handleCloseCreate() {
      this.displayData.create = false;
      this.handleResetData();
    },

    handleExport() {},

    handleUpdate(id) {
      this.editId = id;
      this.displayData.create = true;
    },
    handleDel(id) {
      console.log(id);
      this.$modal
        .confirm('确定删除?')
        .then(async () => {
          try {
            const { code } = await delMenuApi(id);
            if (code !== 200) return;
            this.$modal.msgSuccess('操作成功');
            this.getTableData();
          } catch (err) {
            console.warn(err);
          }
        })
        .catch(() => {
          this.$modal.msg('已取消操作');
        });
    },

    async handleChangeDisplay(id, val) {
      try {
        const { code } = await changeDisplayApi(id, val);
        if (code !== 200) return;
        this.$modal.msgWarning('操作成功,当前菜单已经变更,3秒后将退出登录状态');
        setTimeout(() => {
          this.handleLoginOut();
        }, 2800);
      } catch (err) {
        console.warn(err);
      }
    },

    async handleLoginOut() {
      try {
        const { code } = await logoutApi();
        if (code !== 200) return;
        this.$store.dispatch('user/clearLoginInfo');
        this.$store.dispatch('permission/clearPermission');
        this.$router.push('/login');
      } catch (err) {
        console.warn(err);
      }
    }

    // ** ---------- crud End---------- **
  }
};
</script>

<style lang="scss" scoped></style>
